

function onClickRow(i, row) {
    
}

function getTooltipTable(row, columns) {
    
    let table = $('<table>', {
        'class': 'tooltip-table'
    });    

    let tr;
    // 每行显示的条目数， 默认为3
    let itemCountPerRow = 3;  
    for(let i = 0;i<columns.length;i++) {
        let col = columns[i];
        if (i % itemCountPerRow === 0) {
            tr = $('<tr>');
            table.append(tr);
        }
        
        let td = $('<th>');
        td.append(col.title + ":");
        tr.append(td);
        td = $('<td>');
        td.append(row[col.field]);
        tr.append(td);
    }
    return table;
}


let mouseoverRowIndex = -1;

// tooltip关闭后，一段时间内，不触发onmouseover事件
let closeTooltipDelay = false;

function buildRowTooltipEl(gridId) {
    let tooltip = $('<div>', {
        'class': 'tooltip',
        id: gridId+"-row-tooltip"
    });
    let tooltipHeader = $('<div>', {
        'class': 'tooltip-title'
    });
    tooltipHeader.css({
        textAlign: 'right'
    });
    let closeBut = $('<a>', {
        'class': 'fa fa-window-close'
    });
    closeBut.css({
        'textDecoration': 'none',
        cursor: 'pointer',
        color: 'red'
    })
    closeBut.click(function() {
        $(this).closest('.tooltip').hide();
        closeTooltipDelay = true;
        setTimeout(function() {
            closeTooltipDelay = false;
        }, 1000);

    })
    tooltipHeader.append(closeBut);
    tooltip.append(tooltipHeader);
    
    let tooltipContent = $('<div>', {
        'class': 'tooltip-content'
    });
    tooltip.append(tooltipContent);

    $(document.body).append(tooltip);
    return tooltip;
}

function showRowTooltip(event, gridId, row, columns) {

    if (closeTooltipDelay) {
        return;
    }

    let tooltip;
    if (!$('#'+gridId+"-row-tooltip").length) {
        tooltip = buildRowTooltipEl(gridId);
    } else {
        tooltip = $('#'+gridId+"-row-tooltip");
    }
    
    tooltip.css({
        left: 0,
        top: 0
    });
    let tooltipContent = tooltip.find('.tooltip-content');
    tooltipContent.empty();
    let tooltipTable = getTooltipTable(row, columns);
    tooltipContent.append(tooltipTable);
    tooltip.show();
    let tooltipTableWidth = tooltipContent.width();
    let tooltipTableHeight = tooltipContent.height();
    console.log(tooltipTableWidth, tooltipTableHeight);

    let x = event.clientX;
    let y = event.clientY;

    let wWidth = document.body.clientWidth;
    let wHeight = document.body.clientHeight;

    let gap = 2;
    let titleHeight = 35;

    let finalX;
    let finalY;
    if (x + gap + tooltipTableWidth > wWidth) {
        finalX = x - tooltipTableWidth - gap;
    } else {
        finalX = x + gap;
    }

    console.log('y', y);
    if (y + gap + tooltipTableHeight > wHeight) {
        finalY = wHeight - tooltipTableHeight - titleHeight - gap;
    } else {
        finalY = y + gap;
    }
    
    

    $('.tooltip').css({
        left: finalX,
        top: finalY
    });

        
}

function onLoadSuccess() {

    let datagrid = this;
    $(datagrid).parent().find('[datagrid-row-index]').mouseover(function(event) {
        
        let el = $(this);
        let rowIndex = el.attr('datagrid-row-index');
        if (mouseoverRowIndex == rowIndex) {
            return;
        }
        mouseoverRowIndex = rowIndex;
        
        let rows = $(datagrid).datagrid('getRows');
        let options = $(datagrid).datagrid('options');
        let gridId = options.id;
        let columns = options.columns[0];
        let columnsFixed = options.frozenColumns[0];
        if (!columnsFixed) {
            columnsFixed = []
        }
        if (rows && rows.length) {
            let row = rows[rowIndex];
            showRowTooltip(event, gridId, row, columnsFixed.concat(columns));
        }
    });
} 